async function  getBannerList(){
    let res = await requestBanner()
    let {resultCode,resultInfo} = res.data
    if(resultCode == 1){
        let bannerList = resultInfo.list
        showBanner(bannerList)
    }
}

function showBanner(bannerList){
    let bannerStr = bannerList.map(item=>{
        return `<div class="swiper-slide">
            <img src="${item.url}" alt="pic${item.id}"/>
        </div>`
    }).join('')

    const swiperBanner = document.querySelector('.swiper-wrapper')
    swiperBanner.innerHTML = bannerStr

    initSwiper()
}

function initSwiper(){
    new Swiper('#swiper1', {
        autoplay: true, // 自动轮播
        initialSlide: 0, // 初始索引号
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            hideOnClick: true,
        },
        // effect: 'fade',  // 切换效果
        effect: 'slide',
    })


    new Swiper('#swiper2', {
        autoplay: true,
        slidesPerView: 3,
        grid: {
            fill: 'row',
            rows: 1,
        },
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },

        effect: 'coverflow',
        slidesPerView: 3,
        centeredSlides: true,
    })
}

getBannerList()